<script setup>
import {onMounted, ref} from 'vue'
import ModuleTitle from './moduleTitle.vue'
import ModuleFirst from './moduleFirst.vue'
import ModuleSecond from './moduleSecond.vue'
import ModuleThird from './moduleThird.vue'
import ModuleFourth from './moduleFourth.vue'

let screen = ref()
const getScale = (width=1920,height=1080)=>{
    let scaleX = window.innerWidth / width;
    let scaleY = window.innerHeight / height;
    return Math.min(scaleX, scaleY);
}

onMounted(()=>{
    screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})

window.onresize=()=>{
    screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>

<template>
    <div class="container" ref="screen">
        <!-- 头部 -->
        <ModuleTitle />
        <div class="main">
            <ModuleFirst />
            <ModuleSecond />
            <ModuleThird />
            <ModuleFourth />
        </div>
    </div>
</template>

<style scoped>
.container {
    position: fixed;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform-origin: left top;
}
</style>
